<template>
  <section id="about" class="about">
    <div class="about-container">
      <div class="section-header">
        <h2 class="section-title">关于我</h2>
        <p class="section-subtitle">了解我的专业技能和特长</p>
      </div>
      
      <!-- 个人简介部分 -->
      <div class="profile-section">
        <h3 class="section-subtitle-line">个人简介</h3>
        <p class="bio-text">{{ profile.bio }}</p>
      </div>
      
      <!-- 技能展示区 -->
      <div class="skills-section">
        <h3 class="section-subtitle-line">技术栈</h3>
        
        <!-- 主要技能分类圆球 -->
        <div class="main-categories">
          <div 
            v-for="(catName, index) in mainCategories" 
            :key="catName"
            class="category-circle"
            :class="{ active: activeCategory === catName }"
            @click="activeCategory = catName"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="circle-icon">
              <i :class="getCategoryIcon(catName)"></i>
            </div>
            <div class="circle-name">{{ formatCategoryName(catName) }}</div>
          </div>
        </div>
        
        <!-- 子技能展示区 -->
        <div class="skills-detail-container">
          <transition name="fade" mode="out-in">
            <div :key="activeCategory" class="skills-detail">
              <div class="skills-wrapper">
                <div 
                  v-for="(skill, index) in getTopSkills(groupedSkills[activeCategory] || [])" 
                  :key="index" 
                  class="skill-badge"
                  :class="getSkillLevelClass(skill.level)"
                >
                  {{ skill.name }}
                </div>
                
                <div 
                  class="show-more" 
                  v-if="groupedSkills[activeCategory] && groupedSkills[activeCategory].length > maxSkillsToShow" 
                  @click="toggleShowAll(activeCategory)"
                >
                  {{ showAllCategories[activeCategory] ? '收起' : `查看更多(+${groupedSkills[activeCategory].length - maxSkillsToShow})` }}
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';

const props = defineProps({
  profile: {
    type: Object,
    required: true
  }
});

// 技能按类别分组
const groupedSkills = computed(() => {
  const grouped = {};
  
  if (props.profile.skills) {
    props.profile.skills.forEach(skill => {
      if (!grouped[skill.category]) {
        grouped[skill.category] = [];
      }
      grouped[skill.category].push(skill);
    });
    
    // 将每个分类内的技能按熟练度排序
    Object.keys(grouped).forEach(category => {
      grouped[category].sort((a, b) => b.level - a.level);
    });
  }
  
  return grouped;
});

// 主要分类列表（限制为4个主要类别）
const mainCategories = computed(() => {
  return Object.keys(groupedSkills.value).slice(0, 4);
});

// 当前激活的分类
const activeCategory = ref('');

// 确保activeCategory有一个默认值
if (computed(() => mainCategories.value.length > 0 && !activeCategory.value).value) {
  activeCategory.value = mainCategories.value[0];
}

// 控制每个分类是否显示全部技能
const showAllCategories = reactive({});

// 默认显示的技能数量
const maxSkillsToShow = 8;

// 根据分类名称获取对应的图标
const getCategoryIcon = (category) => {
  const icons = {
    frontend: 'fas fa-code',
    backend: 'fas fa-server',
    design: 'fas fa-paint-brush',
    ai: 'fas fa-brain',
    mobile: 'fas fa-mobile-alt',
    other: 'fas fa-tools'
  };
  
  return icons[category] || 'fas fa-star';
};

const formatCategoryName = (name) => {
  const names = {
    frontend: '前端开发',
    backend: '后端开发',
    design: '设计',
    ai: '人工智能',
    mobile: '移动开发',
    other: '其他技能'
  };
  
  return names[name] || name.charAt(0).toUpperCase() + name.slice(1);
};

const getSkillLevelClass = (level) => {
  if (level >= 90) return 'expert';
  if (level >= 75) return 'advanced';
  if (level >= 50) return 'intermediate';
  return 'beginner';
};

// 获取显示的技能
const getTopSkills = (skills) => {
  if (!skills || !skills.length) return [];
  
  // 只显示熟练度 >= 50 的技能
  const filteredSkills = skills.filter(skill => skill.level >= 50);
  
  // 根据是否展开全部来返回适当数量的技能
  return showAllCategories[activeCategory.value] 
    ? filteredSkills 
    : filteredSkills.slice(0, maxSkillsToShow);
};

// 切换显示全部技能
const toggleShowAll = (category) => {
  showAllCategories[category] = !showAllCategories[category];
};
</script>

<style lang="scss" scoped>
@import '../styles/variables.scss';
@import '../styles/animations.scss';
@import '../styles/responsive.scss';

.about {
  padding: 6rem 2rem;
  background-color: #f9fafb;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 20%, rgba($primary-color, 0.03) 0%, transparent 80%);
    z-index: 0;
  }
  
  @include mobile {
    padding: 4rem 1.25rem;
  }
  
  &-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  
  .section-header {
    text-align: center;
    margin-bottom: 4rem;
    
    .section-title {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: $text-color;
      position: relative;
      display: inline-block;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(to right, $primary-color, $accent-color);
        border-radius: 3px;
      }
    }
    
    .section-subtitle {
      font-size: 1.15rem;
      color: $text-secondary;
      margin-top: 1rem;
    }
  }
  
  .section-subtitle-line {
    font-size: 1.5rem;
    font-weight: 600;
    color: $text-color;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.8rem;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 3px;
      background: linear-gradient(to right, $primary-color, $accent-color);
      border-radius: 3px;
    }
  }
  
  // 个人简介部分
  .profile-section {
    margin-bottom: 4rem;
    
    .bio-text {
      font-size: 1.05rem;
      line-height: 1.8;
      color: $text-secondary;
      max-width: 100%;

      @include mobile {
        max-width: 100%;
      }
    }
  }
  
  // 技能部分
  .skills-section {
    margin-bottom: 3rem;
  }
  
  // 主要技能分类圆球样式
  .main-categories {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 2.5rem;
    gap: 2.5rem;
    flex-wrap: wrap;
    
    @include mobile {
      justify-content: center;
      gap: 1.5rem;
    }
    
    .category-circle {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: white;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: all 0.4s ease;
      position: relative;
      animation: scaleIn 0.5s ease-out forwards;
      
      @include mobile {
        width: 100px;
        height: 100px;
      }
      
      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba($primary-color, 0.15);
      }
      
      &.active {
        background: linear-gradient(135deg, $primary-color, $accent-color);
        box-shadow: 0 15px 35px rgba($primary-color, 0.25);
        transform: translateY(-10px) scale(1.05);
        
        .circle-icon, .circle-name {
          color: white;
        }
        
        &:after {
          content: '';
          position: absolute;
          bottom: -15px;
          left: 50%;
          transform: translateX(-50%);
          border-width: 8px;
          border-style: solid;
          border-color: $accent-color transparent transparent transparent;
        }
      }
      
      .circle-icon {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
        color: $primary-color;
        transition: all 0.3s ease;
        
        @include mobile {
          font-size: 1.8rem;
        }
      }
      
      .circle-name {
        font-size: 0.9rem;
        font-weight: 500;
        text-align: center;
        color: $text-color;
        transition: all 0.3s ease;
        
        @include mobile {
          font-size: 0.8rem;
        }
      }
    }
  }
  
  // 技能详情样式
  .skills-detail-container {
    padding: 1rem 0;
    min-height: 200px;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, rgba($primary-color, 0.2), transparent);
    }
  }
  
  .skills-detail {
    .skills-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      animation: fadeIn 0.4s ease;
    }
    
    .skill-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.6rem 1.4rem;
      border-radius: 50px;
      font-size: 0.95rem;
      font-weight: 500;
      background-color: white;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      }
      
      &.expert {
        background: linear-gradient(135deg, $accent-color, adjust-hue($accent-color, 15deg));
        color: white;
      }
      
      &.advanced {
        background: linear-gradient(135deg, $primary-color, adjust-hue($primary-color, 15deg));
        color: white;
      }
      
      &.intermediate {
        border: 2px solid rgba($primary-color, 0.3);
        background-color: rgba($primary-color, 0.05);
        color: $primary-color;
      }
    }
    
    .show-more {
      cursor: pointer;
      font-size: 0.9rem;
      color: $primary-color;
      padding: 0.6rem 1.4rem;
      border-radius: 50px;
      border: 2px dashed rgba($primary-color, 0.3);
      background-color: rgba($primary-color, 0.03);
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      
      &:hover {
        background-color: rgba($primary-color, 0.08);
        border-color: rgba($primary-color, 0.5);
      }
      
      &:after {
        content: '\f078';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 0.5rem;
        font-size: 0.8rem;
        transition: transform 0.3s ease;
      }
      
      &.active:after {
        transform: rotate(180deg);
      }
    }
  }
}

// 动画
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.4s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>